<template>
  <div class="space-detail-view max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- 返回按钮和项目标题 -->
    <div class="mb-6 flex items-center justify-between">
      <div>
        <router-link to="/space"
                     class="inline-flex items-center text-sm text-gray-500 hover:text-indigo-600 transition-colors duration-200">
          <svg t="1748517729326" class="icon mr-2 w-4 h-4 transition-transform duration-200 group-hover:-translate-x-1"
               viewBox="0 0 1118 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5017" fill="currentColor">
            <path
                d="M229.419389 558.545455 1070.545455 558.545455C1096.251802 558.545455 1117.090909 537.706344 1117.090909 512 1117.090909 486.293656 1096.251802 465.454545 1070.545455 465.454545L229.419389 465.454545 544.912606 149.961328C563.089738 131.784198 563.089738 102.313246 544.912606 84.136115 526.735475 65.958984 497.264525 65.958984 479.087394 84.136115L84.136115 479.087394C75.04755 488.175959 70.503267 500.087979 70.503267 512 70.503267 523.912021 75.04755 535.824041 84.136115 544.912606L479.087394 939.863887C497.264525 958.041014 526.735475 958.041014 544.912606 939.863887 563.089738 921.686754 563.089738 892.215802 544.912606 874.038672L229.419389 558.545455Z"
                p-id="5018"></path>
          </svg>
          返回工作空间
        </router-link>
        <h1 class="text-3xl font-bold text-gray-900 mt-2">{{ spaceVo?.spaceName }}</h1>
      </div>
      <div class="flex space-x-3">
        <button v-if="isSpaceCreator(spaceUserVo?.spaceUserRole)"
            @click="showInviteModal"
            class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-200">
          <svg t="1748519487200" class="icon mr-2 w-4 h-4 text-gray-600" viewBox="0 0 1024 1024" version="1.1"
               xmlns="http://www.w3.org/2000/svg" p-id="14723" width="200" height="200">
            <path
                d="M497.265778 804.522667c0 85.504 34.986667 162.816 91.306666 218.510222-25.031111 0.625778-50.176 0.910222-75.093333 0.910222-246.840889 0-513.536-26.624-513.536-143.985778v-32.256c0-86.072889 181.987556-173.283556 337.180445-221.184 11.207111-3.470222 85.390222-46.990222 34.816-95.345777-84.878222-76.856889-115.313778-158.776889-117.475556-263.566223 0-163.498667 109.340444-267.662222 257.422222-267.662222 148.138667 0 254.748444 104.049778 254.748445 267.662222-2.446222 104.504889-29.411556 186.083556-113.493334 262.883556a103.253333 103.253333 0 0 0-9.045333 11.946667 306.972444 306.972444 0 0 0-146.830222 262.087111z m307.2 219.420444a219.363556 219.363556 0 1 1 0-438.784 219.363556 219.363556 0 0 1 0 438.784z m-43.861334-263.338667h-58.538666a43.861333 43.861333 0 1 0 0 87.779556h58.538666v58.538667a43.804444 43.804444 0 1 0 87.779556 0v-58.538667h58.538667a43.804444 43.804444 0 1 0 0-87.779556h-58.538667v-58.481777a43.918222 43.918222 0 1 0-87.779556 0v58.481777z"
                fill="#8a8a8a" p-id="16"></path>
          </svg>
          邀请成员
        </button>
        <button v-if="isSpaceCreator(spaceUserVo?.spaceUserRole)"
            class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-200">
          <svg t="1748517902391" class="icon mr-2 w-4 h-4" viewBox="0 0 1024 1024" version="1.1"
               xmlns="http://www.w3.org/2000/svg" p-id="7911" fill="currentColor">
            <path
                d="M850.1475552 556.37333333c1.8204448-14.5635552 3.18577813-29.35466667 3.18577813-44.37333333s-1.36533333-29.80977813-3.18577813-44.37333333l96.256-75.32088854c8.64711147-6.82666667 11.15022187-19.11466667 5.46133333-29.12711146l-91.02222186-157.696c-5.68888853-9.78488853-17.52177813-13.88088853-27.76177814-9.78488854l-113.32266666 45.73866667c-23.43822187-17.97688853-49.152-33.22311147-76.91377707-44.8284448L625.77777813 76.0035552c-2.048-10.69511147-11.37777813-19.11466667-22.75555626-19.11466667h-182.04444374c-11.37777813 0-20.7075552 8.4195552-22.528 19.11466667l-17.06666666 120.6044448a336.78222187 336.78222187 0 0 0-76.91377814 44.8284448L191.14666667 195.69777813a22.7555552 22.7555552 0 0 0-27.76177814 9.78488854l-91.02222186 157.696c-5.68888853 9.78488853-3.18577813 22.07288853 5.46133333 29.12711146l96.0284448 75.32088854C172.032 482.19022187 170.66666667 496.98133333 170.66666667 512s1.36533333 29.80977813 3.18577813 44.37333333l-96.0284448 75.32088854c-8.64711147 6.82666667-11.15022187 19.11466667-5.46133333 29.12711146l91.02222186 157.696c5.68888853 9.78488853 17.52177813 13.88088853 27.76177814 9.78488854l113.32266666-45.73866667c23.43822187 17.97688853 49.152 33.22311147 76.91377814 44.8284448l17.06666666 120.6044448c1.8204448 10.69511147 11.15022187 19.11466667 22.528 19.11466667h182.04444374c11.37777813 0 20.7075552-8.4195552 22.528-19.11466667l17.06666666-120.6044448a336.78222187 336.78222187 0 0 0 76.91377814-44.8284448l113.32266666 45.73866667a22.7555552 22.7555552 0 0 0 27.76177814-9.78488854l91.02222186-157.696c5.68888853-9.78488853 3.18577813-22.07288853-5.46133333-29.12711146l-96.0284448-75.32088854zM512 671.28888853c-88.064 0-159.28888853-71.22488853-159.28888853-159.28888853s71.22488853-159.28888853 159.28888853-159.28888853 159.28888853 71.22488853 159.28888853 159.28888853-71.22488853 159.28888853-159.28888853 159.28888853z"
                p-id="7912"></path>
          </svg>
          空间设置
        </button>
      </div>
    </div>
    <!-- 空间信息栏-->
    <div class="bg-white shadow rounded-lg p-6 mb-8">
      <div class="flex flex-wrap items-start justify-between">
        <div class="mb-4 md:mb-0">
          <p class="text-gray-600">
            {{
              `创建于 ${formatTime(spaceVo?.createTime, "YYYY-MM-DD")} · 最后更新于 ${formatTime(spaceVo?.createTime, "YYYY-MM-DD")}`
            }}</p>
          <div class="mt-2 flex items-center">
            <span class="text-sm text-gray-500 mr-3">项目成员:</span>
            <div class="flex -space-x-2 overflow-hidden">
              <img v-for="avatar in spaceVo?.spaceUserAvatars"
                  class="h-8 w-8 rounded-full ring-2 ring-white"
                   :src="avatar"
                   alt="用户头像">
              <button v-if="isSpaceCreator(spaceUserVo?.spaceUserRole)"
                  @click="showInviteModal"
                  class="h-8 w-8 rounded-full bg-gray-100 ring-2 ring-white flex items-center justify-center hover:bg-gray-200 transition-colors duration-200">
                <svg t="1748517955795" class="icon w-4 h-4 text-gray-600" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="9050" fill="currentColor">
                  <path
                      d="M925.696 384q19.456 0 37.376 7.68t30.72 20.48 20.48 30.72 7.68 37.376q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68l-287.744 0 0 287.744q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888l0-287.744-287.744 0q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68l287.744 0 0-287.744q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68q39.936 0 68.096 28.16t28.16 68.096l0 287.744 287.744 0z"
                      p-id="9051"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div class="flex space-x-3">
          <div class="flex flex-col items-center px-4 py-2 bg-gray-50 rounded-md">
            <span class="text-xl font-semibold text-gray-900">{{`${spaceVo?.totalCount}/${spaceVo?.maxCount}`}}</span>
            <span class="text-xs text-gray-500">图片数量</span>
          </div>
          <div class="flex flex-col items-center px-4 py-2 bg-gray-50 rounded-md">
            <span class="text-xl font-semibold text-gray-900">{{`${formatSize(spaceVo?.totalSize)}/${formatSize(spaceVo?.maxSize)}`}}</span>
            <span class="text-xs text-gray-500">图片用量</span>
          </div>
          <div class="flex flex-col items-center px-4 py-2 bg-gray-50 rounded-md">
            <span class="text-xl font-semibold text-gray-900">147</span>
            <span class="text-xs text-gray-500">评论</span>
          </div>
        </div>
      </div>
      <div class="mt-6 border-t border-gray-200 pt-6">
        <p class="text-gray-700">
          {{spaceVo?.profile}}
        </p>
      </div>
    </div>
    <!-- 图片区域--->
    <div class="picture">
      <h2 class="text-xl font-medium text-gray-900 pb-4">空间图片</h2>
      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        <SpacePictureCard v-for="item in 4"></SpacePictureCard>
      </div>
    </div>

    <!-- 邀请用户弹窗 -->
    <InviteUserModal :is-visible="isInviteModalVisible"
                     :space-id="spaceId"
                     @close="closeInviteModal"/>
  </div>
</template>

<script setup lang="ts">
import {computed, onMounted, ref} from 'vue';
import SpacePictureCard from "@/pages/SpacePage/components/SpacePictureCard.vue";
import InviteUserModal from "@/pages/SpacePage/components/InviteUserModal.vue";
import {useRoute, useRouter} from "vue-router";
import {getSpaceDetailRequestByGet, getSpaceUserAuthByGet} from "@/api/space-service";
import type {SpaceVo, SpaceUserVo} from "@/api/space-service"
import {message} from "@/plugins/message";
import {formatSize, formatTime} from "@/utils";
import {isSpaceCreator} from "@/auth";

const route = useRoute();
const router = useRouter();

const spaceId = ref<Number | null>(null);
const spaceVo = ref<SpaceVo>();
const spaceUserVo = ref<SpaceUserVo>();
onMounted(() => {
  spaceId.value = route.params.id
  getSpaceDetail()
  getSpaceUserAuth()
})

const getSpaceDetail = async () => {
  const res = await getSpaceDetailRequestByGet(spaceId.value);
  if (res.code != 200) {
    if (res.code == 40402) {
      router.push({
        path: "/notFound",
      })
    } else {
      message.error("请求失败", res.description);
      router.go(-1);
    }
  } else {
    spaceVo.value = res.data;
  }
}

const getSpaceUserAuth = async () => {
  const res = await getSpaceUserAuthByGet(spaceId.value);
  if (res.code != 200) {
    if (res.code == 40402) {
      router.push({
        path: "/notFound",
      })
    } else {
      message.error("请求失败", res.description);
      router.go(-1);
    }
  }
  spaceUserVo.value = res.data;
}
// 控制邀请弹窗显示
const isInviteModalVisible = ref(false);

const showInviteModal = () => {
  isInviteModalVisible.value = true;
};

const closeInviteModal = () => {
  isInviteModalVisible.value = false;
};
</script>

<style scoped>

</style>